// ======= 新极简卡片风格美化 =======
$primary: #6C63FF;
$secondary: #F4F6FB;
$border: #E0E3EB;
$text: #222;
$text-light: #888;
$radius: 18px;
$shadow: 0 4px 24px rgba(108,99,255,0.08);
$white: #fff;

body, .inbound-manage-container {
  background: $secondary !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
}

.page-header {
  background: none;
  margin-bottom: 24px;
  text-align: left;
  padding: 0 0 18px 0;
  border-bottom: 4px solid $primary;
  .page-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: $primary;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    i { color: $primary; font-size: 1.5rem; }
  }
  .page-description {
    color: $text-light;
    font-size: 1rem;
    margin: 0;
  }
}

.action-bar {
  background: $white;
  border-radius: $radius;
  box-shadow: $shadow;
  padding: 24px 28px 18px 28px;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  .search-row {
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 16px;
    .search-section {
      width: 100%;
      .search-box {
        display: flex;
        align-items: center;
        background: $secondary;
        border-radius: $radius;
        border: 1.5px solid $border;
        padding: 0 12px;
        .search-input {
          border: none;
          background: transparent;
          outline: none;
          font-size: 1rem;
          flex: 1;
          padding: 12px 0;
        }
        .search-btn-group {
          display: flex;
          gap: 8px;
          .search-btn, .reset-btn {
            border: none;
            background: $primary;
            color: $white;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: background 0.2s;
            &:hover { background: darken($primary, 8%); }
          }
          .reset-btn {
            background: #e0e0e0;
            color: #555;
          }
        }
      }
    }
  }
  .action-buttons {
    display: flex;
    gap: 14px;
    .btn {
      border-radius: $radius;
      font-size: 1rem;
      font-weight: 600;
      padding: 10px 28px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.18s;
      &.btn-primary {
        background: $primary;
        color: $white;
        &:hover { background: darken($primary, 8%); }
      }
      &.btn-secondary {
        background: $white;
        color: $primary;
        border: 2px solid $primary;
        &:hover { background: $secondary; }
      }
    }
  }
}

.table-container {
  background: $white;
  border-radius: $radius;
  box-shadow: $shadow;
  padding: 0 0 18px 0;
  .table-header {
    padding: 18px 24px 0 24px;
    .table-info {
      font-size: 1rem;
      color: $text-light;
      display: flex;
      gap: 18px;
      .total-count { color: $primary; font-weight: 600; }
      .current-page { color: $text; }
    }
  }
  .table-wrapper {
    overflow-x: auto;
    .data-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      th, td {
        padding: 14px 12px;
        font-size: 1rem;
        border-bottom: 1px solid $border;
        background: none;
      }
      th {
        font-weight: 700;
        color: $text;
        background: $secondary;
        border-top: none;
      }
      .data-row {
        transition: background 0.18s;
        &:hover td { background: #EEF1FF; }
        td.actions {
          display: flex;
          gap: 8px;
          .action-btn {
            border: none;
            background: $secondary;
            color: $primary;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            box-shadow: 0 2px 8px rgba(108,99,255,0.08);
            transition: background 0.18s, color 0.18s;
            &:hover {
              background: $primary;
              color: $white;
            }
            &.delete-btn { color: #ff3b3b; &:hover { background: #ff3b3b; color: $white; } }
            &.approve-btn { color: #2ecc71; &:hover { background: #2ecc71; color: $white; } }
          }
        }
      }
    }
  }
}

// 状态徽章
.status-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.95em;
  font-weight: 600;
  background: $secondary;
  color: $primary;
  &.status-default { color: $text-light; background: $secondary; }
  &.status-draft { color: #888; background: #f3f3f3; }
  &.status-pending { color: #e67e22; background: #fff6e3; }
  &.status-rejected { color: #ff3b3b; background: #ffeaea; }
  &.status-completed { color: #2ecc71; background: #eafff3; }
}

// 分页
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding: 0 24px 0 24px;
  .pagination-info {
    color: $text-light;
    font-size: 1rem;
  }
  .pagination-controls {
    display: flex;
    gap: 6px;
    .page-btn {
      border: none;
      background: $secondary;
      color: $text;
      border-radius: 10px;
      padding: 7px 16px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s, color 0.18s;
      &.active {
        background: $primary;
        color: $white;
      }
      &:hover:not(.active) {
        background: lighten($primary, 38%);
        color: $primary;
      }
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }
}

// 弹窗
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  animation: dialog-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #fafafa, #f5f5f5);
  border-radius: 12px 12px 0 0;
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    margin: 0;
    letter-spacing: -0.5px;
  }
  .close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    color: #8c8c8c;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #262626;
    }
  }
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  background: $secondary;
  border-top: 1px solid $border;
  border-radius: 0 0 $radius $radius;
  padding: 16px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  .btn {
    border-radius: $radius;
    font-size: 1rem;
    padding: 8px 28px;
    font-weight: 600;
    &.btn-primary {
      background: $primary;
      color: $white;
      border: none;
    }
    &.btn-secondary {
      background: $white;
      color: $primary;
      border: 2px solid $primary;
    }
  }
}

// 明细表格
.details-table {
  background: $secondary;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(108,99,255,0.08);
  min-width: 700px;
  th, td {
    padding: 10px 8px;
    font-size: 1rem;
    border-bottom: 1px solid $border;
    background: none;
  }
  th {
    color: $primary;
    font-weight: 700;
    background: $white;
  }
  tbody tr:hover td {
    background: #EEF1FF;
  }
  input[type="text"], input[type="number"], input[type="date"] {
    border: 1.5px solid $border;
    border-radius: 8px;
    font-size: 1rem;
    background: $white;
    padding: 6px 10px;
    transition: border 0.2s;
    &:focus {
      border-color: $primary;
      background: $secondary;
    }
  }
  button {
    border-radius: 8px;
    background: $primary;
    color: $white;
    font-size: 1rem;
    border: none;
    padding: 6px 18px;
    transition: background 0.18s;
    &:hover { background: darken($primary, 8%); }
  }
}

// Tab栏
.tab-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  .tab-btn {
    padding: 7px 22px;
    border-radius: 16px;
    background: $secondary;
    color: $primary;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    &.active {
      background: $primary;
      color: $white;
    }
    &:hover:not(.active) {
      background: lighten($primary, 38%);
      color: $primary;
    }
  }
}

// 日志表格
.log-table {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(108,99,255,0.08);
  margin-top: 10px;
  th, td {
    text-align: center;
    font-size: 1rem;
    padding: 10px 6px;
    border-bottom: 1px solid $border;
    background: none;
  }
  th {
    color: $primary;
    font-weight: 700;
    background: $white;
  }
  tbody tr:hover td {
    background: #EEF1FF;
  }
  .empty-cell {
    color: $text-light;
    font-size: 1rem;
    padding: 24px 0;
    background: $secondary;
  }
}

// 自定义文件上传样式
.file-upload-area {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fafafa;

  &:hover {
    border-color: #409eff;
    background: #f0f8ff;
  }

  .upload-icon {
    font-size: 48px;
    color: #d9d9d9;
    margin-bottom: 16px;
  }

  .upload-text {
    color: #666;
    font-size: 14px;
  }
}

.uploaded-files {
  .file-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 8px;
    gap: 8px;

    i {
      color: #409eff;
    }

    span {
      flex: 1;
      font-size: 14px;
    }

    .btn-danger {
      padding: 4px 8px;
      font-size: 12px;
    }
  }
}

// 响应式
@media (max-width: 900px) {
  .action-bar, .table-container, .modal-content { padding: 8px !important; }
  .details-table { min-width: 400px; }
}
@media (max-width: 600px) {
  .page-header { padding: 0 0 8px 0; }
  .action-bar, .table-container { border-radius: 10px; padding: 4px !important; }
  .modal-content { border-radius: 10px; }
  .details-table th, .details-table td { font-size: 0.9rem; }
}